import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Typography, message } from 'antd';
import {
  UserOutlined,
  LockOutlined,
  MobileOutlined,
  WechatOutlined,
  MailOutlined,
} from '@ant-design/icons';
import { getCaptcha, login } from '@/views/login/api';
import { useNavigate } from 'react-router-dom';
import { initLogin } from '@/utils/storage';
import { Checkbox } from 'antd';
import loginImage from '/src/assets/img/login-bg.jpg';

const { Title } = Typography;

const Login = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [captcha, setCaptcha] = useState();
  const [captchaKey, setCaptchaKey] = useState();
  const navigate = useNavigate();

  const refreshCaptcha = () => {
    getCaptcha().then((resp) => {
      setCaptcha(resp.data.image);
      setCaptchaKey(resp.data.key);
    });
  }

  // 登录处理函数
  const loginHandler = (loginForm) => {
    loginForm.certificate = btoa(encodeURIComponent(loginForm.certificate));
    let remember = loginForm.remember;
    delete loginForm.remember;
    
    let form = {
      data: loginForm,
      captchaKey,
    }
    login(form).then(resp => {
      // 设置登陆人信息
      initLogin(resp.data, remember);
      // 跳转首页
      navigate('/');
    })
  };

  /**
   * 微信登陆
   */
  const tipHandler = () => {
    messageApi.info('该功能正在加班加点的赶来，敬请期待！');
  }

  useEffect(() => {
    refreshCaptcha();
  }, []);

  return (
    <div style={{
      backgroundImage: `url(${loginImage})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      minHeight: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      {contextHolder}
      <Form
        name="normal_login"
        className="login-form"
        onFinish={loginHandler}
        initialValues={{ remember: false }}
        style={{
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          padding: '50px',
          borderRadius: '8px',
          width: '450px',
          border: '1px solid #1890ff'
        }}
      >
        <Title level={3} style={{ textAlign: 'center', marginBottom: '24px' }}>登陆系统</Title>
        <Form.Item
          name="type"
          hidden
          initialValue="PASSWORD"
        >
          <Input type='hidden' />
        </Form.Item>
        <Form.Item
          name="username"
          // 用户名必填校验
          rules={[{ required: true, message: '请输入用户名!', whitespace: true }]}
        >
          <Input
            // 增加图标和输入文字之间的距离
            prefix={<UserOutlined className="site-form-item-icon" style={{ marginRight: 8 }} />}
            placeholder="用户名"
            style={{ height: '40px', fontSize: '16px' }}
          />
        </Form.Item>
        <Form.Item
          name="certificate"
          // 密码必填校验
          rules={[{ required: true, message: '请输入密码!', whitespace: true }]}
        >
          <Input
            // 增加图标和输入文字之间的距离
            prefix={<LockOutlined className="site-form-item-icon" style={{ marginRight: 8 }} />}
            type="password"
            placeholder="密码"
            style={{ height: '40px', fontSize: '16px' }}
          />
        </Form.Item>
        <Form.Item
          name="captcha"
          // 验证码必填校验
          rules={[{ required: true, message: '请输入验证码!', whitespace: true }]}
        >
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Input
              placeholder="验证码"
              style={{
                width: '100%',
                height: '40px',
                marginRight: '20px',
                fontSize: '16px'
              }}
            />
            <span style={{ width: '110px', height: '38px', padding: '4px 10px', backgroundColor: '#fff', borderRadius: 5 }}>
              <img
                src={captcha}
                alt="验证码"
                style={{
                  width: '90px',
                  height: '30px',
                  cursor: 'pointer',
                }}
                onClick={refreshCaptcha}
              />
            </span>
          </div>
        </Form.Item>

        {/* 添加记住我和注册账号 */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: 3
        }}>
          <Form.Item name="remember" valuePropName='checked' noStyle>
            <Checkbox style={{ lineHeight: '32px' }}>记住我</Checkbox>
          </Form.Item>
          <Button
            type="link"
            onClick={() => navigate('/register')}
            style={{ padding: 0 }}
          >
            注册账号
          </Button>
        </div>

        {/* 登录按钮 */}
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
            style={{ height: 40 }}
          >
            登录
          </Button>
        </Form.Item>

        {/* 添加其他登录方式 */}
        <div style={{ 
          display: 'flex', 
          justifyContent: 'space-between',
          marginTop: 0
        }}>
          <Button 
            type="link"
            icon={<WechatOutlined />}
            // onClick={() => navigate('/login/wechat')}
            onClick={tipHandler}
            style={{ color: '#07C160' }}
          >
            微信登录
          </Button>
          <Button 
            type="link"
            icon={<MailOutlined />}
            // onClick={() => navigate('/login/email')}
            onClick={tipHandler}
            style={{ color: '#FF6A00' }}
          >
            邮箱登录
          </Button>
          <Button 
            type="link"
            icon={<MobileOutlined />}
            // onClick={() => navigate('/login/phone')}
            onClick={tipHandler}
            style={{ color: '#1890ff' }}
          >
            手机号登录
          </Button>
        </div>
      </Form>
    </div>
  );
};

export default Login;
